<template>
  <div class="home">
    <!-- 头部开始 -->
    <div class="header">
      <!-- 标题开始 -->
      <van-nav-bar title="掌上新闻" >
        <template #left>
          <van-icon name="user-o" size="18" />
        </template>
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
      <!-- 标题结束 -->
      <!-- 频道开始 -->
      <van-row>
        <van-col span="21">
          <van-tabs  v-model="activeName">
            <van-tab 
            :name="item.id"
            v-for="item in getSelectedCate" 
            :title="item.cateName"
            :key="item.id"
            :to="{path:'/home/newslist/'+item.id}"
            >
            
            </van-tab>
          </van-tabs>
        </van-col>
        <van-col class="add" @click="goToCateManage" span="3">+</van-col>
      </van-row>
      
      <!-- 频道结束 -->
    </div>
    <!-- 头部结束 -->
    <!-- 容器开始 -->
    <router-view></router-view>
    <!-- 容器结束 -->
  </div>
</template>

<script>
import {mapActions,mapGetters} from 'vuex'
export default {

  name: 'Home',
  data(){
    return {
      //* 然后在使用的时候，需要在params之中传递一个id  
      //注意点：就是在params传递的值，在刷新后，会消失，但是id比较特殊，会保留！
      activeName:this.$route.params.id
    }
  },
  methods:{
    ...mapActions(['getData']),
    goToCateManage(){
      this.$router.push({path:'/select'})
    }
  },
  computed:{
    ...mapGetters(['getSelectedCate'])
  },
  //mounted生命周期函数：载入后（html已经渲染）
  mounted(){
  //   this.$http('http://localhost:3000/getCategroy')
  //   .then(res=>{
  //     console.log(res)
  //   }).catch(err=>{
  //     //异常处理
  // console.log(err)
  //   })
      // this.$http('/getCategroy')
      // .then(res=>{
      //   console.log(res)
      // }).catch(err=>{
      //   console.log(err)
      // })
  this.getData()
  }
}
</script>

<style lang="scss">
.home{
  .header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    .van-nav-bar{
      height: 40px;
      background-color: #d2691e;
      .van-nav-bar__content{
        height: 40px;
      }
      .van-icon{
        color: #fff;
      }
      .van-nav-bar__title{
        font-size: 20px;
        color: #fff;
      }
      
    }
    .add{
        display: flex;
        justify-content: center;
        align-items: center;
        color: #d2691e;
        border-left: 1px solid #eee;
        border-bottom: 1px solid #eee;
        height: 44px;
        background-color: #fff;
      }
  }
}
</style>